<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>左右结构页面</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f4f6f8;
    }
    .container {
      display: flex;
      height: 100vh;
    }
    .sidebar {
      width: 200px;
      background-color: #ffffff; /* 白色背景 */
      color: #333; /* 深灰色文字 */
      padding: 20px;
      border-right: 1px solid #ddd; /* 右侧边框 */
    }
    .sidebar h2 {
      margin: 0 0 20px;
      font-size: 1.2em;
      text-align: center;
      color: #555; /* 深灰色标题 */
    }
    .sidebar ul {
      list-style: none;
      padding: 0;
    }
    .sidebar ul li {
      margin-bottom: 10px;
    }
    .sidebar ul li a {
      color: #333; /* 深灰色链接文字 */
      text-decoration: none;
      display: flex;
      align-items: center;
      padding: 8px 0;
      border-radius: 5px;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .sidebar ul li a:hover {
      background-color: #f2f2f2; /* 悬停时的浅灰色 */
      color: #222; /* 悬停时的深灰色文字 */
    }
    .sidebar ul li a i {
      margin-right: 10px;
      font-size: 1.2em;
      color: #666; /* 图标的颜色 */
    }
    .sidebar ul li a.active {
      background-color: #ffecb3; /* 选中状态的浅黄色 */
      color: #333; /* 选中状态的深灰色文字 */
    }
    .content {
      flex: 1;
      padding: 20px;
      background-color: #ffffff; /* 白色背景 */
      box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); /* 左侧阴影 */
    }
    .content h2 {
      margin-top: 0;
      color: #333; /* 深灰色标题 */
    }
    .table thead {
      background-color: #ffecb3; /* 表头的浅黄色 */
    }
    .table th, .table td {
      border-color: #ffecb3; /* 表格边框的浅灰色 */
    }
    /* 彩色系导航栏 */
    .sidebar ul li:nth-child(1) a {
      color: #ff6347; /* 红色 */
    }
    .sidebar ul li:nth-child(2) a {
      color: #4682b4; /* 蓝色 */
    }
    .sidebar ul li:nth-child(3) a {
      color: #32cd32; /* 绿色 */
    }
    .sidebar ul li a:hover {
      color: #333; /* 悬停时的深灰色文字 */
    }
    .sidebar ul li a.active {
      color: #333; /* 选中状态的深灰色文字 */
    }
  </style>
</head>
<body>

  <div class="content">
    <form action="/Student/edit" class="was-validated" method="post">
      <div class="form-group" hidden="hidden">
        <label for="name">id:</label>
        <input type="text" class="form-control" id="id" placeholder="Enter username" name="name" th:value="${student.name}"required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入用户名！</div>
      </div>
      <div class="form-group">
        <label for="name">Username:</label>
        <input type="text" class="form-control" id="name" placeholder="Enter username" name="name" th:value="${student.name}"required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入用户名！</div>
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password" th:value="${student.password}" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入密码！</div>
      </div>
      <div class="form-group">
        <label for="clazz">班级:</label>
        <input type="text" class="form-control" id="clazz" placeholder="Enter class" name="clazz" th:value="${student.clazz}" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入班级！</div>
      </div>
<!--      <div class="form-group">-->
<!--        <label for="sex1">性别:</label>-->
<!--        <div class="d-flex">-->
<!--          <div class="form-check mr-3">-->
<!--            <input class="form-check-input" type="radio" name="sex" id="sex1" value="1" th:checked="${student.sex==0}" required>-->
<!--            <label class="form-check-label" for="sex1">男</label>-->
<!--          </div>-->
<!--          <div class="form-check">-->
<!--            <input class="form-check-input" type="radio" name="sex" id="sex2" value="0" th:checked="${student.sex==1}" required>-->
<!--            <label class="form-check-label" for="sex2">女</label>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="invalid-feedback">请选择性别！</div>-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <label for="birthday">出生日期：</label>-->
<!--        <input type="date" class="form-control" id="birthday" placeholder="Enter birthday" name="birthday" th:value="${student.birthday}" required>-->
<!--        <div class="valid-feedback">验证成功！</div>-->
<!--      </div>-->
      <div class="form-group">
        <label for="sex">性别:</label>
        <input type="text" class="form-control" id="sex" placeholder="Enter class" name="clazz" th:value="${student.sex}" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入性别！</div>
      </div>
      <div class="form-group">
        <label for="clazz">日期:</label>
        <input type="text" class="form-control" id="birthday" placeholder="Enter class" name="clazz" th:value="${student.birthday}" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入日期！</div>
      </div>
      <div class="form-group form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">同意协议才能提交。</div>
        </label>
      </div>
      <button type="submit" class="btn btn-primary">修改学生</button>
    </form>
  </div>
</div>
<script src="/bootstrap/js/jquery.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>